<template>
  <div>
    <el-card>
      <el-button type="primary" size="small" @click="handleAdd">
        <el-icon style="vertical-align: middle"><Plus /></el-icon>
        <span style="vertical-align: middle"> 新增 </span>
      </el-button>
    </el-card>
    <el-table :data="list">
      <el-table-column
        align="center"
        prop="name"
        label="参数名称"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="value"
        label="参数值"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="productName"
        label="所属产品"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" size="small" @click="editTp(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="delTp(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" v-model="dialogVisible" @close="cancel">
      <el-form ref="addFormRef" label-width="120px">
        <el-form-item label="所属产品">
          <el-select v-model="form.productName" placeholder="请选择对应的产品">
            <el-option
              v-for="product in productList"
              :key="product._id"
              :label="product.name"
              :value="product.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="参数值">
          <!-- <el-input v-model="form.value" /> -->
          <Editor :value="form.value" @change="handleChangeValue" />
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button @click="confirm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  getTechniqueParamsList,
  editTechniqueParamsApi,
  addTechniqueParamsApi,
  delTechniqueParamsApi
} from '@/api/content/technique-params'
import { getProjectList } from '@/api/content/project'
import { ElMessage, ElMessageBox } from 'element-plus'
// @ts-ignore
import Editor from '@/components/Editor/index.vue'
import { ref } from 'vue'
const dialogVisible = ref(false)
const title = ref('新增技术参数')
const list = ref([])
const productList = ref([])
const editId = ref('')
const form = ref({
  name: '',
  value: '',
  productName: ''
})

const editorRef = ref(null)
const load = () => {
  getTechniqueParamsList().then((res) => {
    list.value = res.data
  })
}

const handleChangeValue = (val:string) => {
  form.value.value = val
}

const editTechniqueParams = (row: any) => {
  console.log('row', row)
}

const handleAdd = () => {
  dialogVisible.value = true
  title.value = '新增技术参数'
}

const cancel = () => {
  form.value.name = ''
  form.value.productName = ''
  form.value.value = ''
  dialogVisible.value = false
}
const delTp = (row: any) => {
  ElMessageBox.confirm('改操作将删除这条技术参数?', '确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      delTechniqueParamsApi(row._id).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        load()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
const confirm = () => {
  if ((title.value = '编辑技术参数')) {
    form.value.value = editorRef.value.valueHtml
    editTechniqueParamsApi(editId.value, form.value).then((res) => {
      ElMessage({
        message: '编辑成功',
        type: 'success'
      })
      load()
      dialogVisible.value = false
    })
  } else {
    form.value.value = editorRef.value.valueHtml
    addTechniqueParamsApi(form.value).then((res) => {
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      load()
      dialogVisible.value = false
    })
  }
}
const loadProductList = () => {
  getProjectList().then((res) => {
    console.log('res', res)
    productList.value = res.data
  })
}

const editTp = (row: any) => {
  title.value = '编辑技术参数'
  editId.value = row._id
  form.value.name = row.name
  form.value.value = row.value
  form.value.productName = row.productName
  dialogVisible.value = true
}

loadProductList()
load()
</script>
